<template>
  <div id="list">
    <span>密码</span>
    <a-button type="link" @click="showModal1">修改密码</a-button>
    <a-modal
      v-model:visible="visible1"
      title="修改密码"
      @ok="handleOk1"
      okText="确定"
      cancelText="取消"
    >
      <a-input-password
        v-model:value="value1"
        placeholder="请输入密码"
        style="margin-bottom: 20px"
      />
      <a-input-password v-model:value="value2" placeholder="请再次输入密码" />
    </a-modal>
  </div>
  <a-divider style="height: 0.5px; background-color: #91d5ff" />

  <div id="list">
    <span>手机</span>
    <a-button type="link" @click="showModal2">修改手机</a-button>
    <a-modal
      v-model:visible="visible2"
      title="修改手机"
      @ok="handleOk2"
      okText="确定"
      cancelText="取消"
    >
      <p>验证码将发送短信至手机 {{ phone }}</p>
      <a-input v-model:value="value3" placeholder="" style="width: 150px" />
      <a-button type="primary" @click="getMessage" style="margin-left: 10px"
        >获取验证码</a-button
      >
      <a-input
        v-model:value="value4"
        placeholder="请输入更换的手机号"
        style="margin-top: 20px"
      />
    </a-modal>
  </div>
  <a-divider style="height: 1px; background-color: #91d5ff" />

  <div id="list">
    <span>邮箱</span>
    <a-button type="link" @click="showModal3">绑定邮箱</a-button>
    <a-modal
      v-model:visible="visible3"
      title="绑定邮箱"
      @ok="handleOk3"
      okText="确定"
      cancelText="取消"
    >
      <p>验证码将发送短信至手机 {{ phone }}</p>
      <a-input v-model:value="value5" placeholder="" style="width: 150px" />
      <a-button type="primary" @click="getMessage" style="margin-left: 10px"
        >获取验证码</a-button
      >
      <a-input
        v-model:value="value6"
        placeholder="请输入绑定邮箱"
        style="margin-top: 20px"
      />
    </a-modal>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import { message } from "ant-design-vue";
import { changePwd, changePhone ,changeEMail } from "../../api/users";

export default defineComponent({
  setup() {
    let value1 = ref("");
    let value2 = ref("");
    let phone = ref("13210543391");
    let num = "";
    let value3 = ref("");
    let value4 = ref("");
    let value5 = ref("");
    let value6 = ref("");

    const visible1 = ref(false);
    const showModal1 = () => {
      visible1.value = true;
    };
    const handleOk1 = () => {
      if (value1.value != value2.value) {
        message.info("两次密码输入不一致！");
      } else {
        changePwd({
          url: "/users/changePwd",
          password: value1.value,
          success: (res) => {
            message.info(res.data);
            // console.log(res);
          },
          err: (err) => {
            console.log(err);
          },
        });
        visible1.value = false;
      }
    };

    const getMessage = () => {
      num = "";
      for (let i = 0; i < 6; i++) {
        num += Math.floor(Math.random() * 10);
      }
      message.info(num);
    };

    const visible2 = ref(false);
    const showModal2 = () => {
      visible2.value = true;
    };
    const handleOk2 = () => {
      if (value3.value == num) {
        if (value4.value.length == 11) {
          changePhone({
            url: "/users/changePhone",
            phone: value4.value,
            success: (res) => {
              message.info(res.data);
              // console.log(res);
            },
            err: (err) => {
              console.log(err);
            },
          });
          visible2.value = false;
        } else {
          message.info("手机号输入错误！");
        }
      } else {
        message.info("验证码错误！");
      }
    };

    const visible3 = ref(false);
    const showModal3 = () => {
      visible3.value = true;
    };
    const handleOk3 = () => {
      if (value5.value == num) {
        changeEMail({
            url: "/users/changeEMail",
            email: value6.value,
            success: (res) => {
              message.info(res.data);
              // console.log(res);
            },
            err: (err) => {
              console.log(err);
            },
          });
        visible3.value = false;
      } else {
        message.info("验证码错误！");
      }
    };
    return {
      value1,
      value2,
      phone,
      value3,
      value4,
      value5,
      value6,
      visible1,
      showModal1,
      handleOk1,
      visible2,
      showModal2,
      getMessage,
      handleOk2,
      visible3,
      showModal3,
      handleOk3,
    };
  },
});
</script>
<style scoped>
#list {
  margin: 20px;
  display: flex;
  justify-content: space-between;
}
</style>